<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.引入Vue源码 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 2.准备待渲染容器 -->
    <div id="app">
        <h1>{{ message }}</h1>
        <p>姓名: {{ obj.name }}</p>
        <p>学号: {{ obj.userId }}</p>
    </div>
    <!-- 3.创建应用并声明数据 -->
    <script>
        const {createApp, ref} = Vue
        createApp({
            setup() {
                // <1> 基本数据的响应类型
                const message = ref("Hello World!")
                
                // <2> 引用类型数据的响应类型
                const obj = ref({
                    name: "careathers",
                    userId: 1234567,
                })
                return {
                    message,
                    obj
                }
            }
        }).mount("#app")
    </script>
</body>

</html>
